<template>
  <div id="app">
    <!-- 上部搜索框 -->
    <div class="search-container">
      <input class="search-input" type="text" v-model="searchQuery" placeholder="搜索ai小工具..." />
      <button class="search-button">搜索</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchQuery: '' // 用于保存搜索框的值
    };
  }
};
</script>
<style>


.search-container {
  flex: 1; /* 让搜索容器占据可用空间 */
  width: 300px; /* 设置搜索框的宽度 */
  height: 50px; /* 设置搜索框的高度 */
}

.content-container {
  flex: 3; /* 让内容容器占据更多可用空间 */
}
.search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.search-input {
  height: 50px; /* 设置搜索框的高度 */
  width: 100%; /* 设置搜索框的宽度为整个页面 */
  //border: none; /* 去除默认的边框 */
  //outline: none; /* 去除默认的轮廓 */
}

.search-button {
  height: 50px; /* 设置搜索按钮的高度 */
  background-color: #007bff; /* 设置按钮的背景颜色 */
  color: #fff; /* 设置按钮的文字颜色 */
  border: none; /* 去除默认的边框 */
  outline: none; /* 去除默认的轮廓 */
}
</style>